<template>
  <div class="step">
    <div v-for="(i,index) in names" :key="i">
      <div class="line" :class="{solid:data > index,gradient:data == index}"></div>
      <div class="circular" :class="{solid:data > index}" @click="geturl(index)">{{index+1}}
        <span :class="{solid:data > index}">{{i}}</span>
      </div>
    </div>
    <div class="line small"  :class="{solid:data == 4}"></div>
  </div>
</template>
<script>
let names = ['选择素材','确认素材','选择样式','生成简报']
export default {
  name:'step',
		data(){
			return{
        names,
			}
		},
  props: ['data'],
  methods:{
    geturl(i){
      if(i==0){
        this.$router.push('/brief/step01')
      }else if(i==1){
        this.$router.push('/brief/confirmsc')
      }else if(i==2){
        this.$router.push('/brief/choosestyle')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.line
  display inline-block
  vertical-align middle
  height 3px
  width 194px
  background #e6e6e6
  &.small
    width 91px
  &.solid
    background #38418a
  &.gradient
    background linear-gradient(to right, #38418a, #e6e6e6)
.circular
  position relative
  display inline-block
  vertical-align middle
  width 60px
  height 60px
  border-radius 50%
  line-height 60px
  text-align center
  border 3px solid #e6e6e6
  font-size 26px
  color #e6e6e6
  cursor pointer
  &.solid
    color #38418a
    border-color #38418a
  >span
    position absolute
    left -9px
    bottom -28px
    font-size 16px
    color #ccc
    line-height 1
    width 80px
    &.solid
      color #333
.step
  font-size 0
  >div
    display inline-block
    &:first-of-type
        .line
          width 91px
@media screen and (max-width: 1750px)
  .line
    width 150px
    &.small
      width 70px
    
@media screen and (max-width: 1500px) 
  .line
    width 120px
    &.small
      width 56px
  .circular
    width 55px
    height 55px
    line-height 55px
@media screen and (max-width: 1400px) 
  .line
    width 100px
    &.small
      width 47px

</style>

